<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>流程编排-任务执行</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
</head>
<body class="content-wrapper" style="padding: 15px">
<!--顶部条-->
<div style="padding: 0 7px 15px 7px" class="clearfix">
    <!--搜索输入框组-->
    <div class="input-group pull-left" style="width: 50%">
        <input id="keyword" class="form-control" type="search" placeholder="名称">
        <div class="input-group-append">
            <button id="search" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
        </div>
    </div>
    <div class="btn-group" style="margin-left: 4px">
        <button type="button" class="btn btn-outline-info dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-list-ul"></i> 批量 <span class="caret"></span>
        </button>
        <div class="dropdown-menu" role="menu">
            <a id="batch-remove" class="dropdown-item" href="javascript:void(0);">
                <i class="fa fa-times"></i> 批量删除
            </a>
        </div>
    </div>
    <!--新增按钮-->
    <button id="add" class="btn btn-info pull-right"><i class="fa fa-plus"></i> 添加任务</button>
</div>
<!--数据展示-->
<div class="container-fluid">
    <table id="table" class="table table-sm table-hover table-bordered">
        <thead><tr>
            <th>
                <div class="icheck-primary d-inline">
                    <input id="all" type="checkbox">
                    <label for="all">全选</label>
                </div>
            </th>
            <th>名称</th>
            <th>模板</th>
            <th>服务器</th>
            <th>执行参数</th>
            <th style="width: 5em">状态</th>
            <th style="width: 11em;">开始时间</th>
            <th style="width: 11em;">结束时间</th>
            <th style="width: 6em">责任人</th>
            <th style="width: 8em">操作</th>
        </tr></thead>
        <tbody><tr>
            <td>
                <div class="icheck-primary d-inline">
                    <input id="{{id}}" type="checkbox" data-id="{{id}}">
                    <label for="{{id}}">{{index}}</label>
                </div>
            </td>
            <td>{{name}}</td>
            <td>{{template}}</td>
            <td>{{server}}</td>
            <td>{{arg}}</td>
            <td>{{status}}</td>
            <td>{{start}}</td>
            <td>{{complete}}</td>
            <td>{{owner}}</td>
            <td>
                <button class="btn btn-xs btn-outline-danger remove" data-id="{{id}}">
                    <i class="fa fa-times"></i> 删除
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--加载更多-->
<div id="load-more" class="text-sm-center text-primary" style="display: none;">
    <span style="cursor: pointer"><i class="fa fa-hand-o-right"></i> 点击加载更多数据</span>
</div>
<!--正在加载-->
<div id="loading" class="text-sm-center text-gray" style="display: none;">
    <span><i class="fa fa-refresh fa-spin"></i> 正在加载...</span>
</div>
<!--全部加载-->
<div id="load-all" class="text-sm-center text-success" style="display: none;">
    <i class="fa fa-info-circle"></i> 已加载全部数据
</div>
<!--加载失败-->
<div id="load-error" class="text-sm-center text-danger" style="display: none;">
    <i class="fa fa-exclamation-triangle"></i> 加载失败
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var tableCtrl = new TableCtrl(
        Url.automationService.autoTaskHistorySearchByKeyword,
        Url.automationService.autoTaskHistoryDetail,
        Url.automationService.autoTaskHistoryCreate,
        Url.automationService.autoTaskHistoryModify,
        Url.automationService.autoTaskHistoryRemove,
        function (template, record, index) {
            var args = "";
            if (record.args) {
                for (var i = 0; i < record.args.length; i++) {
                    args += "<span class=\"badge bg-info\">" + record.args[i].arg.description + "</span> <small>" + record.args[i].value + "</small><br/>";
                }
            }
            var servers = "";
            if (record.servers) {
                for (var i = 0; i < record.servers.length; i++) {
                    servers = " <span class=\"badge bg-info\">" + record.servers[i].name + "</span> " + servers;
                }
            }

            return template
                .replace(new RegExp("{{index}}", "gm"), index + 1)
                .replace(new RegExp("{{id}}", "gm"), record.id)
                .replace(new RegExp("{{name}}", "gm"), record.name)
                .replace(new RegExp("{{status}}", "gm"), record.statusValue)
                .replace(new RegExp("{{start}}", "gm"), record.startDate)
                .replace(new RegExp("{{complete}}", "gm"), record.completeDate)
                .replace(new RegExp("{{owner}}", "gm"), record.owner.userName)
                .replace(new RegExp("{{template}}", "gm"), record.template.name)
                .replace(new RegExp("{{server}}", "gm"), servers)
                .replace(new RegExp("{{arg}}", "gm"), args)

        },
    );
    tableCtrl.showCreate = function () {
        var name = "创建任务执行";
        var url = "cloud/html/auto-task-history-detail.html?action=create";
        parent.window.frameCtrl.windowCtrl.open("auto-task-history-create", name, url);
    };
    tableCtrl.showModify = function (id) {
        let record = this.getById(id);
        var name = "修改任务执行-" + record.name;
        var url = "cloud/html/auto-task-history-detail.html?action=modify&id=" + id;
        parent.window.frameCtrl.windowCtrl.open("auto-task-history-modify-" + id, name, url);
    };
    tableCtrl.showDetail = function (id) {
        let record = this.getById(id);
        var name = "任务模板执行-" + record.name;
        var url = "cloud/html/auto-task-history-detail.html?action=detail&id=" + id;
        parent.window.frameCtrl.windowCtrl.open("auto-task-history-detail-" + id, name, url);
    };

    tableCtrl.getTemplate();
    tableCtrl.getRecords();
    tableCtrl.bindEvent();

    var listener = function (event) {
        if (event.type === "AUTO_TASK_HISTORY_REFRESH" ||
            event.type === "AUTO_TASK_HISTORY_RUNNING" ||
            event.type === "AUTO_TASK_HISTORY_SUCCESS" ||
            event.type === "AUTO_TASK_HISTORY_ERROR") {
            $("#search").click();
        }
    };
    listener.owner = window.location.href;
    parent.window.frameCtrl.websockerCtrl.eventListener.push(listener);
</script>

</body>
</html>